<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="860px">
      <el-form ref="form" label-width="80px">
        <el-row v-if="contentTpl != ''">
          <div class="radio-input-tpl">
            <div class="tpl-header">语音录入文字模板（预览）</div>
            <div class="tpl-content" v-html="contentTpl"></div>
          </div>
        </el-row>
        <el-row class="tpl-form-header" :gutter="20">
          <div class="small">是否启用</div>
          <div class="small">字段名称</div>
          <div class="small">字段类型</div>
          <div>识别标记</div>
          <div>提示词</div>
        </el-row>
        <el-row v-for="(field, index) in list" :key="index" class="tpl-form-cell" :gutter="20"
          :class="{ disabled: !asrTpl[index].enable }">
          <div class="small"><el-checkbox v-model="asrTpl[index].enable"></el-checkbox></div>
          <div class="small">{{ field.cnName }}</div>
          <div class="small">
            <template v-if="field.isDict">
              字典
            </template>
            <template v-else>
              <dict-tag :options="dict.type.event_field_type" :value="field.type" />
            </template>
          </div>
          <div><el-input placeholder="请输入识别标记" size="mini" v-model="asrTpl[index].asr_tag"
              :disabled="!asrTpl[index].enable"></el-input></div>
          <div><el-input placeholder="请输入提示词" size="mini" v-model="asrTpl[index].tips_char"
              :disabled="!asrTpl[index].enable"></el-input></div>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存模板</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin.js';
import { listModelFields, setModelAsrTpl } from '@/api/system/eventModel';

export default {
  name: 'ModeleEdit',
  mixins: [dialogMixin],
  dicts: ["event_field_type"],
  components: {},
  data() {
    return {
      title: '编辑语音识别模板',
      form: {
        title: '',
        name: ''
      },
      list: [],
      asrTpl: [],
      asrFields: null,
      isedit: false,
      modelId: 0
    }
  },
  mounted() {
  },
  computed: {
    contentTpl() {
      let content = [];
      this.asrTpl.forEach(r => {
        if (r.enable) {
          content.push(`${r.asr_tag}<span>【${r.tips_char}】</span>`);
        }
      });
      if (content.length > 0) {
        return content.join('，') + '。';
      }
      return '';
    }
  },
  methods: {
    showDialog(modelId, asrFields) {
      this.modelId = modelId;
      this.asrFields = asrFields;
      this.asrTpl = [];
      this.getModelFields(modelId);
    },
    getModelFields(modelId) {
      listModelFields(modelId).then((res) => {
        res.data.sysFields.forEach(f => {
          f.include = false;
        })
        this.list = res.data.sysFields;
        this.list.forEach((l, index) => {
          let asrField = this.asrFields == null ? null : this.asrFields.find(val => val.field == l.enName);
          if (asrField != null) {
            l.include = true;
          }
          this.asrTpl.push({
            field: l.enName,
            type: l.type,
            asr_tag: asrField != null ? asrField.asr_tag : l.cnName,
            tips_char: asrField != null ? asrField.tips_char : '',
            enable: l.include
          });
        })
        this.open = true;
      });
    },
    onSubmit() {
      let tpl = []
      this.asrTpl.forEach(r => {
        if (r.enable) {
          tpl.push({
            field: r.field,
            type: r.type,
            asr_tag: r.asr_tag,
            tips_char: r.tips_char
          });
        }
      });
      setModelAsrTpl({ id: this.modelId, asrFields: JSON.stringify(tpl) }).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess('语音识别模板设置成功');
          this.$emit('handleOk')
          this.open = false;
        } else {
          this.$modal.msgError('语音识别模板设置失败');
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tpl-form-header,
.tpl-form-cell {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-bottom: 5px;

  &>div {
    flex: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;

    &.small {
      flex: unset;
      width: 120px;
    }

    &+div {
      margin-left: 10px;
    }
  }
}

.tpl-form-cell.disabled {
  color: #999;

  ::v-deep {
    .el-input__inner {
      background-color: #0b133c !important;
      border-width: 0 !important;
      color: #999 !important;
    }
  }
}

.radio-input-tpl {
  margin-bottom: 20px;

  .tpl-header {
    margin-bottom: 10px;
  }

  .tpl-content {
    background-color: #330b133c;
    color: #CCC;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #009dfa;
    border-radius: 3px;
    line-height: 20px;

    ::v-deep {
      span {
        color: #009dfa;
      }
    }
  }
}
</style>